<!--
 * @Author: Jackie
 * @Date: 2020-12-03 16:51:31
 * @FilePath: \vue_demo\vue_mina\src\components\Home.vue
 * @Copyright (C) 2020 Jackie. All rights reserved.
 * @Description: Home组件
-->
<template>
   <el-container class="home-container">
      <!--页面主体区域-->
      <el-container>
        <!--侧边栏-->
        <el-aside :width="isCollapse===true?'64px':'270px'" >
          <el-menu
            background-color="#1a1a27"
            text-color="#fff"
            active-text-color="#3699ff"
            :collapse="isCollapse"
            :collapse-transition="false"
            :router="true"
            :default-active="activePath"
            >
             <div class="headerTitle">
              <div class="brand">
                <h4 v-show="!isCollapse">Header</h4>
                <span class="icon"  @click="toggleCollapse" >
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" v-show="!isCollapse" >
                          <path d="M5.29288961,6.70710318 C4.90236532,6.31657888 4.90236532,5.68341391 5.29288961,5.29288961 C5.68341391,4.90236532 6.31657888,4.90236532 6.70710318,5.29288961 L12.7071032,11.2928896 C13.0856821,11.6714686 13.0989277,12.281055 12.7371505,12.675721 L7.23715054,18.675721 C6.86395813,19.08284 6.23139076,19.1103429 5.82427177,18.7371505 C5.41715278,18.3639581 5.38964985,17.7313908 5.76284226,17.3242718 L10.6158586,12.0300721 L5.29288961,6.70710318 Z" fill="#3699ff" fill-rule="nonzero" transform="translate(8.999997, 11.999999) scale(-1, 1) translate(-8.999997, -11.999999)" />
                          <path d="M10.7071009,15.7071068 C10.3165766,16.0976311 9.68341162,16.0976311 9.29288733,15.7071068 C8.90236304,15.3165825 8.90236304,14.6834175 9.29288733,14.2928932 L15.2928873,8.29289322 C15.6714663,7.91431428 16.2810527,7.90106866 16.6757187,8.26284586 L22.6757187,13.7628459 C23.0828377,14.1360383 23.1103407,14.7686056 22.7371482,15.1757246 C22.3639558,15.5828436 21.7313885,15.6103465 21.3242695,15.2371541 L16.0300699,10.3841378 L10.7071009,15.7071068 Z" fill="#3699ff" fill-rule="nonzero" opacity="0.3" transform="translate(15.999997, 11.999999) scale(-1, 1) rotate(-270.000000) translate(-15.999997, -11.999999)" />
                          </g>

                          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="matrix(-1,0,0,-1,24,24)" v-show="isCollapse">
                          <path d="M5.29288961,6.70710318 C4.90236532,6.31657888 4.90236532,5.68341391 5.29288961,5.29288961 C5.68341391,4.90236532 6.31657888,4.90236532 6.70710318,5.29288961 L12.7071032,11.2928896 C13.0856821,11.6714686 13.0989277,12.281055 12.7371505,12.675721 L7.23715054,18.675721 C6.86395813,19.08284 6.23139076,19.1103429 5.82427177,18.7371505 C5.41715278,18.3639581 5.38964985,17.7313908 5.76284226,17.3242718 L10.6158586,12.0300721 L5.29288961,6.70710318 Z" fill="#3699ff" fill-rule="nonzero" transform="translate(8.999997, 11.999999) scale(-1, 1) translate(-8.999997, -11.999999)" />
                          <path d="M10.7071009,15.7071068 C10.3165766,16.0976311 9.68341162,16.0976311 9.29288733,15.7071068 C8.90236304,15.3165825 8.90236304,14.6834175 9.29288733,14.2928932 L15.2928873,8.29289322 C15.6714663,7.91431428 16.2810527,7.90106866 16.6757187,8.26284586 L22.6757187,13.7628459 C23.0828377,14.1360383 23.1103407,14.7686056 22.7371482,15.1757246 C22.3639558,15.5828436 21.7313885,15.6103465 21.3242695,15.2371541 L16.0300699,10.3841378 L10.7071009,15.7071068 Z" fill="#696969" fill-rule="nonzero" opacity="0.3" transform="translate(15.999997, 11.999999) scale(-1, 1) rotate(-270.000000) translate(-15.999997, -11.999999)" />
                          </g>
                    </svg>
                  </span>
              </div>
            </div>
            <!--一级菜单-->
            <el-submenu :index="item.id +''" v-for="item in menuList" :key="item.id">
              <!--一级菜单的模板区-->
              <template slot="title">
                <!--icon-->
                <i :class="iconObj[item.id]"></i>
                <!--文本-->
                <span>{{item.authName}}</span>
              </template>
              
              <!--二级菜单-->
              <el-menu-item 
              :index="'/'+item.path" 
              v-for="item in item.children" 
              :key="item.id"
              @click="saveNavState('/'+item.path)"
              
              >
                <!--icon-->
                <i class="el-icon-location"></i>
                <!--文本-->
                <span>{{item.authName}}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!--右侧内容主体-->
        <el-main>
          <!-- 头部区域 -->
          <el-header style="height: 65px;">
            <div class="tabContanier">
              <myIcon />
              <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" >               
                <el-tab-pane
                  v-for="item in editableTabs"
                  :key="item.name"
                  :label="item.title"
                  :name="item.name"
                >
                  <!-- {{item.content}} -->
                </el-tab-pane>
              </el-tabs>
            </div>            
            <button class="signOut" @click="signOut">sign out</button>
          </el-header>
           <!-- 主体区域 -->
           <div class="vBox">
             <div class="mainContainer">
                <router-view></router-view>
             </div>
            
           </div>
          
        </el-main>
      </el-container>
  </el-container>
</template>

<script>
import myIcon from "./Myicon.vue"
export default {
    components: {
      myIcon
  },
  created(){
    this.getMenuList()
    this.activePath=window.sessionStorage.getItem("activePath")
  },
  data(){
    return{
      menuList:[],
      iconObj:{
        125:"el-icon-s-home",
        103:'el-icon-s-platform',
        101:'el-icon-menu',
        102:'el-icon-date',
        145:'el-icon-grape'
      },
      isCollapse:false,
      activePath:'',//激活的二级菜单路径
      editableTabsValue: '1',
      editableTabs: [
        {title: 'Calendar',name: '1',content: '日历'}, 
        ],
      tabIndex: 1
    }
  },
  methods:{
    signOut(){
      window.sessionStorage.clear();
      this.$router.push('/login')
    },
    async getMenuList(){
      const {data:res}=await this.$http.get("menus");
      if(res.meta.status!==200) return this.$message.error(res.meta.msg)
      this.menuList=res.data 
      console.log(this.menuList);
    },
    toggleCollapse(){
      this.isCollapse=!this.isCollapse    
    },
    //保存被激活的二级菜单路径
    saveNavState(parm){
      //保存被激活的二级菜单路径
      window.sessionStorage.setItem("activePath",parm);
      this.activePath=parm;
      //如果数组对象editableTabs中title属性包含传进来的参数，则返回
      if(this.editableTabs.map(a => a.title).indexOf(parm.replace("/",""))===1) return ;
      //否则在editableTabs添加值，让TAB栏上有相应的标签
      let newTabName = ++this.tabIndex + '';
      this.editableTabs.push({ title: parm.replace("/",""),name: newTabName,content: 'New Tab content'});
      this.editableTabsValue = newTabName;
    },
    //移除tab标签
    removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        } 
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
  },
}
</script>

<style lang="less" scoped>
.home-container{
  height: 100%;
  box-sizing: border-box;
  display: flex;
}
/*侧边栏样式*/ 
.el-aside{
  background-color: #1a1a27;
  color: #fff;
  /*侧边栏标题*/ 
  .headerTitle{
    display: flex;
    justify-content: center;
    align-items:center;
    height: 65px;
    background-color: #15151f;
    padding: 0;
    /*侧边栏Brand*/ 
    .brand{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 210px;height:100%;
        /*Brand的切换*/ 
      > span{
        width: 64px;
        text-align: center;
          path:hover {
          fill: #3699ff;
        }
      }
      /*标题*/ 
      > h4{
        font-size: 20px;
        font-weight: 400;
          }
      }
  } 
}
/*主体样式*/ 
.el-main{
  background-color: #fff;
  padding: 0;
  /*头部样式 */
  .el-header{
    position: relative;
    background-color: #fff;
    display: flex;
    padding: 0;
    align-items: center;
    font-size: 20px;
    color: #fff;
    border-bottom: 0.01px solid rgba(#ccc,0.5);
    > button{
    position:absolute;
    right: 0;
  }
  .tabContanier{
    position:absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 40px;
    left:0;bottom: 0;
    .myIcon{
      height: 100%;
    }
    
  
  


  }
  /*退出样式*/ 
    .signOut{
        width: 170px;height: 40px;
        background-color: #e1f0ff;
        color: #3699ff;
        border: transparent;
        border-radius:4px;
        font-weight: 400;
        padding: 8.5px 13px;
        cursor: pointer;
      }
      /*退出样式:点击*/ 
      .signOut:hover{
        background-color: #3699ff;
        color: #fff;
      }
  }
  /*主体区域样式*/ 
  .vBox{
    height: 100%;
    background-color: #f2f4f8;
    display: flex;
    justify-content: center;
    .mainContainer{
      width: 100%;height: 100%;
    }
  }
}

.tabContanier /deep/.el-tabs{
  height: 40px;padding: 0px;
}
// .el-tabs--card>.el-tabs__header
.tabContanier /deep/.el-tabs__header{
  height: 40px;border-bottom: none;
}
.tabContanier /deep/.el-tabs__nav-wrap{
    height: 40px;
}
.tabContanier /deep/.el-tabs__nav-scroll{
  height: 40px;padding: 0;
}
.tabContanier /deep/.el-tabs__nav{
  height: 40px;
  background-color: #fafafa;;
  display: flex;
  justify-content: center;
  align-items: center;
  }
.tabContanier /deep/.el-tabs__item{
  color: #A9A9A9;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 300;
  border-bottom:none;
  padding: 0 10px;
}

.tabContanier /deep/ .el-tabs__item.is-active{
  color:#696969;
  font-weight: 400;
}
</style>
